<template>
    <el-card v-loading="loading" element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
        <template #header>
            <span>编辑菜单 </span>  
        </template>
        <el-form :model="form" ref="form" label-width="80px" :rules="rules">
            <el-form-item label="名称" prop="menu_name">
                <el-input v-model="form.menu_name"></el-input>
            </el-form-item>
            <el-form-item label="路由" prop="router">
                <el-input v-model="form.router"></el-input>
            </el-form-item>
            <el-form-item label="icon"> 
                <el-select v-model="form.icon" placeholder="请选择">
                    <el-option :value="icon" :key="icon" v-for="icon in icons">
                        <i :class="icon"> {{icon}}</i>
                    </el-option>     
                </el-select>
                <i :class="form.icon"></i>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio v-model="form.status" label="1">显示</el-radio>
                <el-radio v-model="form.status" label="0">隐藏</el-radio>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save()">修改</el-button>
                <el-button @click="back()">返回</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
export default {
  props: ["id"],
  data() {
    return {
      loading: false,
      icons: ["el-icon-user-solid","el-icon-date","el-icon-document","el-icon-menu","el-icon-thumb","el-icon-school"],
      ymenu:{},
      form: {
        menu_name: "",
        status: "1",
        icon: "",
        router: ""
      },
      rules: {
        menu_name: [
          {required:true,message:'不能为空'},
          {
            validator: async (rule, value, cb) => {
              if(this.ymenu.menu_name==value){
                cb();
                return;
              }
              const {data} = await this.axios({
                url: `/menus/exists/menu_name/${value}`
              });
              if (data) {
                cb(new Error("名称必须唯一"));
              } else {
                cb();
              }
            }
          }
        ],
        router: [
          {
            validator: async (rule, value, cb) => {
              if (/^(\/\w{1,}){1,}$/.test(value)) {
                cb();
              } else {
                cb(new Error("路由非法"));
              }
              //   const {data:{data}} =await this.axios({
              //       url:`/menus/exists/router/${value}`
              //   });
              //   if(data){
              //        cb(new Error("路由必须唯一"));
              //   }else{
              //       cb();
              //   }
            }
          }
        ]
      }
    };
  },
  created(){
    this.getMenu();
  },
  methods: {
    async getMenu(){
      this.loading = true;
     const {data:{data}}= await this.axios({
        url:`/menus/${this.id}`,
      });
      this.ymenu=data;
      this.form.menu_name=data.menu_name;
      this.form.icon=data.icon;
      this.form.status=data.status;
      this.form.router=data.router;
      this.loading=false;  
      console.log(data)          
    },
    async save() { 
      this.loading = true;
      this.axios({
        method: "put",
        url: `/menus/edit/${this.id}`,
        data: {
          menu_name: this.form.menu_name,
          icon: this.form.icon,
          status: this.form.status,
          router: this.form.router
        }
      });
      this.loading=false;      
      this.$message.success("修改成功");
      this.$router.push({
        name:'HomeMenus'
      })
    },
    back() {
      this.$router.push({
        name: "HomeMenus"
      });
    }
  }
};
</script>


